<template>
  <div class="template_container">
    <div class="tree_box">
      <TreeComponent @tree_click:tree_click="onClickTree"/>
    </div>
    <div class="template_box">
      <!--    查询-->
      <div class="template_search">
        <div class="template_search_box">
          <div class="title">角色：</div>
          <a-input v-model:value="user_data.role" :disabled="user_data.search_status" placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <div class="title">工号：</div>
          <a-input v-model:value="user_data.work_number" :disabled="user_data.search_status" placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <div class="title">姓名：</div>
          <a-input v-model:value="user_data.user_name" :disabled="user_data.search_status" placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <a-button style="margin-right: 10px" type="primary" :disabled="user_data.search_status">查询</a-button>
          <a-button type="primary" :disabled="user_data.search_status">重置</a-button>
        </div>
      </div>
      <!--    列表-->
      <div class="template_table">
        <div class="template_add_btn">
          <a-button style="margin-right: 0.2rem" type="primary" @click="add">新增</a-button>
          <a-button type="primary" @click="re_flash">刷新</a-button>
        </div>
        <!--        :scroll="{ x: 1000 | true, y: 600 }"-->
        <div class="table_box">
          <a-table :pagination="false" bordered :dataSource="user_data.dataSource" :columns="columns">
            <template #operation="{ record }">
              <a-popconfirm
                  v-if="user_data.dataSource.length"
                  title="确认删除当前用户么?"
                  okText="确认"
                  cancelText="取消"
                  @confirm="onDelete(record.key)"
              >
                <a :style="{color:'red'}">删除</a>
              </a-popconfirm>
              <a-popconfirm
                  v-if="user_data.dataSource.length"
                  title="要对当前用户进行编辑?"
                  okText="确认"
                  cancelText="取消"
                  @confirm="onEdit(record,record.key)"
              >
                <a>编辑</a>
              </a-popconfirm>
              <a-popconfirm
                  v-if="user_data.dataSource.length"
                  title="设定当前用户权限?"
                  okText="确认"
                  cancelText="取消"
                  @confirm="set_user_role(record.key)"
              >
                <a>绑定角色</a>
              </a-popconfirm>
            </template>
          </a-table>
          <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                        :total="pageObject.total"
                        @change="changePage"/>
        </div>
      </div>
    </div>
    <AddModel @re_flash:re_flash="re_flash"/>
    <set_role/>
  </div>
</template>

<script>
import {defineComponent, ref, reactive, getCurrentInstance} from 'vue';
import TreeComponent from "@/components/tree/index";
import {getUserPages, deleteUser} from "@/api/user";
import AddModel from "@/views/system/user/user_add";
import {useStore} from "vuex";
import {message} from 'ant-design-vue';
import set_role from "@/views/system/user/set_role";
import {useRouter} from "vue-router"

export default defineComponent({
  // name: "WorkpieceInformation";
  props: {},
  setup() {
    // const {ctx} = getCurrentInstance()
    const router = useRouter()
    const store = useStore()
    const user_data = reactive({
      role: "",
      work_number: "",
      user_name: "",
      add_status: false,
      dataSource: [],
      search_status: true, // 查询权限,

    });

    const pageObject = reactive({
      currentPage: 1,
      total: 10,
      pageIndex: 1
    });

    const userObject = reactive({
      orgId: 0
    })

    const add_status = ref(false)

    const dataSource = [];
    const columns = [
      {
        title: '用户名',
        dataIndex: 'userName',
        key: 'userName',
        width: 100
      },
      {
        title: '真实姓名',
        dataIndex: 'realName',
        key: 'realName',
        width: 100

      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        width: 100

      },
      //  phone
      {
        title: '手机号码',
        dataIndex: 'phone',
        key: 'phone',
        width: 100

      },
      {
        title: '编辑',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
        width: 100

      },
    ];
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')
    //子组件调用
    const close_add = () => {
      store.commit("SET_ADD_USER", false)
    }

    //用户删除
    async function delete_request_user(user) {
      let params = {
        "parm": user
      }
      const res = await deleteUser(params)
      if (res.code === 1) {
        pageObject.pageIndex = 1
        message.success("用户删除成功！")
        re_flash()
        return
      }
      message.warning(res.message)
    }

    //列表删除确认
    const onDelete = key => {
      delete_request_user(user_data.dataSource[key].userId)
      // user_data.dataSource = user_data.dataSource.filter(item => item.key !== key);
    };
    const add = () => {
      // user_data.add_status = true
      store.commit("SET_ADD_USER", true)
    };
    //数据请求
    const get_user_list = async () => {
      let params = {
        "orgId": userObject.orgId,
        "pageIndex": pageObject.pageIndex,
        "pageSize": 10,
        "id": 0,
        "searchValue": "",
        "searchBeginTime": "",
        "searchEndTime": "",
        "field": "",
        "order": "",
        "where": ""
      }
      const res = await getUserPages(params)
      console.log(res)
      user_data.dataSource = []
      if (res.code === 1) {
        pageObject.total = res.data.totalItems
        let result_list = res.data.items
        for (let i = 0; i < result_list.length; i++) {
          result_list[i].key = i
        }
        user_data.dataSource = result_list

        return
      }
      message.warning('用户数据不存在');
    }
    get_user_list()
    //数据刷新
    const re_flash = () => {
      get_user_list()
    }
    const changePage = (e) => {
      // console.log(e)
      pageObject.pageIndex = e
      get_user_list()
    }
    const set_user_role = (e) => {
      // console.log("用户数据", user_data.dataSource[e])
      store.commit('SET_ROLE_STATUS', true)
      store.commit('SET_USER_DATA', user_data.dataSource[e])
    }

    //详细编辑
    const onEdit = (res, key) => {
      store.commit('SET_USER_DATA', res)

      router.push("/index/system/userDetails")
    }

    //点击左侧的树形结构
    const onClickTree = (key) => {
      console.log("调用父级的结点", key)
      userObject.orgId = key
      get_user_list()
    }

    return {
      device_number,
      device_type_number,
      terminal_number,
      dataSource,
      add_status,
      columns,
      user_data,
      pageObject,
      re_flash,
      onDelete,
      close_add,
      add,
      changePage,
      set_user_role,
      onEdit,
      onClickTree
    };
  },
  components: {
    TreeComponent,
    AddModel,
    set_role
  }
});

</script>

<style scoped lang="scss">
</style>
